import { onMounted, ref, watch } from 'vue'
// import * as PDFJS from '@/assets/js/pdfjs-4.0.379-legacy-dist/build/pdf.mjs'
// import pdfjsWorker from '@/assets/js/pdfjs-4.0.379-legacy-dist/build/pdf.worker.mjs'
// PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker

export default function usePDF(container) {
	// const canvasList = ref([])

	const getDocument = (pdfUrl) => {
		return PDFJS.getDocument(pdfUrl)
	}

	const getCanvasEles = (pdfDoc) => {
		const totalPages = pdfDoc.numPages
		const canvasList = []

		for (let i = 1; i <= totalPages; i++) {
			pdfDoc.getPage(i).then((page) => {
				let scaledViewport = page.getViewport({ scale: 1.5 }) //可通过scale来调节初始的缩放比
				//第5步：创建一个 canvas 元素，并设置元素的画布属性
				let canvas = document.createElement('canvas')
				canvas.setAttribute('id', 'the-canvas' + i)
				canvas.height = scaledViewport.height
				canvas.width = scaledViewport.width
				let context = canvas.getContext('2d')
				let renderContext = {
					canvasContext: context,
					viewport: scaledViewport
				}
				//第 6 步: 使用 page.render 将数据渲染到画布上
				page.render(renderContext).promise.then(() => {})
				canvasList.push(canvas)
			})
		}

		return canvasList
	}

	const rander = (canvasList) => {
		return canvasList.forEach(container.appendChild)
	}

	return {
		getDocument,
		getCanvasEles,
		rander
	}
}
